import { h, render, Component, createContext, Fragment } from "../lib/preact";
import { useState, useEffect, useCallback, useContext, useRef } from "../lib/hooks";
import { Router, route, Link, Route, getCurrentUrl, Info } from '../lib/preact-router.es.js';
import { Button, Menu } from '../components/pui/index.js'
import Redirect from "./pui/Router/Redirect.js";
//import { createHashHistory } from '../lib/history.js';
//const Home = () => (<h2>home</h2>);
const Home = () => <h1>Home</h1>;
const About = (props) => <h1>About</h1>;
const Contact = () => <h1>Contact</h1>;
function Content(props) {
    console.log('content组件',props)
    return (
      <div>
        content组件
      </div>
    );
  }
function App() {

    const handleOnChange = (e) => {
        console.log('change url', e.url)
    }
    const btnClick = useCallback(() => {
        console.log('getcurrenturl', getCurrentUrl())
        console.log('location', window.location)
        console.log('getCurrentHashPath', Info.getCurrentHashPath)
    }, []);
    const handleButtonClick = (event) => {
        // 处理App组件的点击逻辑
        console.log('App组件处理点击事件', event);
      };
    useEffect(() => {
        //初始化路由
        console.log('default router init')
        route('/foo')
        //console.log('getCurrentHashPath',Info,Info.getCurrentHashPath())
        return function cleanup() {

        };
        //return () => {}
    }, []);

    return (

        <Fragment>App init
            <button onClick={btnClick} >test</button>

            <Link route='/' activeClassName="active" >home</Link>
            ||<Link route='/about' activeClassName="active" >about</Link>
            ||<Link route='/contact' activeClassName="active" >contact</Link>
            ||<Link route='/content' activeClassName="active" >content</Link>
            ||<Link route='/foo' activeClassName="active" >foo</Link>
            <div>
                <Router className='fade' onChange={handleOnChange} >

                    <Home path="/" />
                    <About path="/about" id="42" ></About>
                    <Contact path="/contact" ></Contact>
                    <Content path="/content" id="42" ></Content>
                    <Redirect path="/foo" to="/contact" />
                </Router>
            </div>
            <div class="row">
                <div class="col col-0">0</div>
                <div class="col col-4">4</div>
                <div class="col col-4">4</div>
                <div class="col col-4">4</div>
                <div class="col col-4">4</div>
                <div class="col col-8">8</div>
                <div class="col col-8">8</div>
            </div>
            <div class="v-row">
                <div class="col col-0">0</div>
                <div class="col col-4">4</div>
                <div class="col col-4">4</div>
                <div class="col col-4">4</div>
                <div class="col col-4">4</div>
                <div class="col col-8">8</div>
                <div class="col col-8">8</div>
            </div>

            <Button onClick={handleButtonClick} leftIcon="fa-star fas fa-1x " rightIcon="fa-star" >测试按钮</Button>
            <Button theme="primary"  >主要按钮</Button>
            <Button theme="success"  >success按钮</Button>
        </Fragment>
    );
}
export default App